<template>
	<div class="box" :style="boxStyle">
		<div
			class="consult-bar"
			:style="{
				backgroundColor: FieldItem.attrs.style.bgColor,
				width: FieldItem.attrs.style.width + 'px',
				borderRadius: FieldItem.attrs.style.borderRadius + 'px',
				paddingTop: FieldItem.attrs.style.topBottom + 'px',
				paddingBottom: FieldItem.attrs.style.topBottom + 'px',
				color: FieldItem.attrs.style.textColor,
			}"
		>
			<div
				v-for="(optItem, index) in FieldItem.attrs.optlist"
				:key="'consult-item-' + index"
				class="consult-item"
				@click="handlerJump(optItem)"
				@mouseenter="(e) => handlerMouseenter(e, index, optItem)"
			>
				<img :src="formatSrc(optItem.icon)" alt="" />
				<span>{{ optItem.title }}</span>
			</div>
			<div
				class="bg"
				@mouseleave="handlerMouseleave"
				v-show="isShow"
				:style="{
					position: 'absolute',
					top: offsetTop + 'px',
				}"
			>
				<div
					class="popup"
					:style="{
						marginRight: FieldItem.attrs.style.width + 20 + 'px',
					}"
				>
					<div
						v-for="(popupItem, index) in popupData[currentPopIndex!]?.data"
						:key="'popup-item-' + index"
						class="popup-item"
						@click="handlerPopupItemClick(popupItem)"
					>
						<img :src="formatSrc(popupItem[popupData[currentPopIndex!].iconField]) || '' " />
						<span>{{ popupItem[popupData[currentPopIndex!].titleField] }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import Lxy_page_event_remote from '/@/components/Linxyun/custom/CustomCommon/lxy_page_event_remote.js';
import { formatSrc } from '/@/utils/extendMethods';

import { useRouter } from 'vue-router';
import iconImage from '../../../../assets/image/003.png';
const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | Record<string, any>;
	}>(),
	{
		FieldItem: () => ({}),
	}
);
const { FieldItem, pageData, inputData, globalData } = toRefs(props);
const boxStyle = reactive<Record<string, any>>({});
const isShow = ref<boolean>(false);
const currentPopIndex = ref<number | null>(1);
const popupData = reactive({});
const simulation = {
	1: {
		data: [
			{
				icon: iconImage,
				title: '微信111',
				qqID: '2633057734',
			},
			{
				icon: iconImage,
				title: '微信222',
				qqID: '2633057734',
			},
			{
				icon: iconImage,
				title: '微信333',
				qqID: '2633057734',
			},
			{
				icon: iconImage,
				title: '微信444',
				qqID: '2633057734',
			},
			{
				icon: iconImage,
				title: '微信555',
				qqID: '2633057734',
			},
		],
		iconField: 'icon',
		titleField: 'title',
	},
};
const init = async () => {
	if (FieldItem.value.attrs.style.bottom > 0 && FieldItem.value.attrs.style.top === 0) {
		boxStyle.bottom = FieldItem.value.attrs.style.bottom + FieldItem.value.attrs.style.bottomUnit;
	} else {
		boxStyle.top = FieldItem.value.attrs.style.top + FieldItem.value.attrs.style.topUnit;
	}
	if (FieldItem.value.attrs.style.right > 0 && FieldItem.value.attrs.style.left === 0) {
		boxStyle.right = FieldItem.value.attrs.style.right + FieldItem.value.attrs.style.rightUnit;
	} else {
		boxStyle.left = FieldItem.value.attrs.style.left + FieldItem.value.attrs.style.leftUnit;
	}

	FieldItem.value.attrs.optlist.forEach(async (optItem: Record<string, any>, index: number) => {
		if (optItem.eventType === 'popUp') {
			const remoteEvent = new Lxy_page_event_remote(optItem.dynamicOptions);
			remoteEvent.setDataSrc(pageData!.value, props.inputData, globalData?.value);
			const result = await remoteEvent.callEvent();
			const base = { iconField: optItem.iconField || '', titleField: optItem.titleField || '', qqField: optItem.qqField || '' };
			if (result.success && result.Records && result.Records.length)
				popupData[index] = {
					data: result.Records,
					...base,
				};
			else
				popupData[index] = {
					data: [],
					...base,
				};
		}
	});
};

const handlerJump = (optItem: Record<string, any>) => {
	if (optItem?.eventType === 'jump') {
		const remoteEvent = new Lxy_page_event_remote(optItem.dynamicOptions);
		remoteEvent.setDataSrc(pageData!.value, props.inputData, globalData?.value);
		const params = remoteEvent.calcInputParams();
		console.log('handlerJump params', params);
		let urlParams = '';
		if (params) {
			const keys = Object.keys(params);
			urlParams = keys.reduce(
				(prev: string, currVal: string, index) => {
					prev = prev + currVal + '=' + (params[currVal] || '');
					if (index < keys.length - 1) {
						prev += '&';
					}
					return prev;
				},
				optItem.jumpUrl[optItem.jumpUrl.length - 1] === '?' ? '' : '?'
			);
		}
		window.location.href = optItem.jumpUrl + urlParams;
	}
};
const offsetTop = ref(0);
const handlerMouseenter = (event: any, index: number, optItem: Record<string, any>) => {
	if (optItem.eventType !== 'popUp') {
		currentPopIndex.value = null;
		isShow.value = false;
		return;
	}
	currentPopIndex.value = index;
	isShow.value = true;
	offsetTop.value = event.target.offsetTop;
	console.log('handlerMouseenter');
};
const handlerMouseleave = () => {
	currentPopIndex.value = null;
	isShow.value = false;
};

const handlerPopupItemClick = (item: Record<string, any>) => {
	if (!currentPopIndex.value) return;
	const { serveType, qqField } = FieldItem.value.attrs.optlist[currentPopIndex.value!];
	if (serveType === 'qq') {
		setTimeout(() => {
			window.location.href = `tencent://message/?uin=${item[qqField]}&Site=linxyun&Menu=yes`;
		}, 1000);
	}
	// window.location.href = 'tencent://message/?uin=2633057734&Site=linxyun&Menu=yes';
	// window.location.href = 'weixin://dl/business/?ticket=TL60354';
};
(async () => {
	await init();
})();
</script>
<style lang="scss" scoped>
.box {
	position: fixed;
	z-index: 9999;
	.bg {
		width: 600px;
		// position: absolute;
		// height: 100%;
		right: 0;
		top: 0;
		// background: red;
		z-index: -1;
	}
}
.consult-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	img {
		width: 14px;
	}
}
.popup {
	background-color: #fff;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 500px;
	color: var(--el-text-color-regular);
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
	padding: 10px;
}
.popup-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
	cursor: pointer;
	img {
		width: 25px;
	}
}
</style>
